<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title></title>
	<style type="text/css">
		.layui-elem-field {
			border-color: black !important;
		}
	</style>
	<link href="css/mui.min.css" rel="stylesheet" />
	<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		mui.init();
	</script>
	<script type="text/javascript" src="js/vue.min.js" charset="utf-8"></script>
	<link rel="stylesheet" href="js/layui/dist/css/layui.css">
	<script type="text/javascript" src="js/layui/dist/layui.js" charset="utf-8"></script>
	<script src="js/words.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="form">
		<fieldset class="layui-elem-field">
			<legend>
				答案
				<button type="button" 
					class="layui-btn layui-btn-xs layui-btn-normal" 
					v-on:click="show_answer = !show_answer">切换显示</button>
			</legend>
			<div class="layui-field-box">
				<span v-if="show_answer">{{ english_answer }}{{ chinese_answer }}</span>
			</div>
		</fieldset>
		<fieldset class="layui-elem-field" v-if="show_english">
			<legend>英文</legend>
			<div class="layui-field-box">
				{{ english_word }}
			</div>
		</fieldset>
		<div v-else class="layui-form-item">
			<label class="layui-form-label">英文</label>
			<div class="layui-input-block">
				<input type="text" v-model="en_input" placeholder="请输入" class="layui-input">
			</div>
		</div>
		<fieldset class="layui-elem-field" v-if="show_chinese">
			<legend>中文</legend>
			<div class="layui-field-box">
				{{ chinese_word }}
			</div>
		</fieldset>
		<div v-else class="layui-form-item">
			<label class="layui-form-label">中文</label>
			<div class="layui-input-block">
				<input type="text" v-model="cn_input" placeholder="请输入" class="layui-input">
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var id = parseInt(location.href.split('?id=')[1]);
		var word_list_length = word_list[id].length;
		var rand_num = 0;
		var rand_en_cn = 0;
		const change_content = function (p) {
			if (word_list_length === 0) {
				return;
			}
			rand_num = Math.round(Math.random() * word_list_length);
			rand_en_cn = Math.round(Math.random());
			p.en_input = '';
			p.cn_input = '';
			const c = word_list[id][rand_num]['c'];
			const e = word_list[id][rand_num]['e'];
			if (rand_en_cn === 0) {  // en
				p.english_answer = '';
				p.chinese_answer = c;
				p.show_english = true;
				p.show_chinese = false;
				p.english_word = e;
				p.chinese_word = '';
			} else if (rand_en_cn === 1) {  // cn
				p.english_answer = e;
				p.chinese_answer = '';
				p.show_english = false;
				p.show_chinese = true;
				p.english_word = '';
				p.chinese_word = c;
			}
		};
		
		var practice = new Vue({
			el: '#form',
			data: {
				show_answer: false,
				english_answer: '',
				chinese_answer: '',
				english_word: '',
				chinese_word: '',
				en_input: '',
				cn_input: '',
				show_english: true,
				show_chinese: true
			},
			created: function () {
				change_content(this);
			},
			watch: {
				en_input: function (text) {
					if (text === this.english_answer && text !== '') {
						change_content(this);
					}
				},
				cn_input: function (text) {
					if (text === this.chinese_answer && text !== '') {
						change_content(this);
					}
				}
			}
		});
	</script>
</body>
</html>